import React, { Component } from 'react';
import axios from './../../axios';
import { 
	Card,
	ConfigProvider,
	Pagination,
	Table,
	Modal,
	Form,
	Input,
	InputNumber,
	Button,
	message,
	Select,
	Tag
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import Utils from './../../utils/utils';

const Option = Select.Option;

class IpPage extends Component {
	state = {
		dataSource: [],//列表数据
		count: 0,//列表总条数
		requestParams: {//请求列表数据的参数
			field: "", 
			value: "", 
			page: 1, 
			limit: 10
		},
		pageSizeOptions:["10","20","50"],//表格显示每页多少条分页记录数
		isCreateVisible: false,//模态框
		formTitle: "添加菜单",//模态框标题
	}
	
	formRef = React.createRef();//创建和修改模态框表单
	searchFormRef = React.createRef();//搜索信息表单
	
	//获取列表数据
	requestList = (data) => {
		axios.ajax({
			url: "/Manager/PermitMng/eleRetrieve", 
			method: "post",
			data: data,
		}).then(res=>{
			if(res.code === 0){
				//Table的数据没有key就报错，自己加一个key
				let resData = res.result.data.map((item, index)=>{
					let key = index;
					return {...item, key}
				})
				this.setState({
					dataSource: resData,
					count: res.result.count
				})
			}
		})
	}
	
	//查询列表数据
	searchSubmit = values => {
		let data = {...this.state.requestParams};
		if(!values.value){
			data.field = "";
			data.value = "";
		}else{
			data.field = values.field;
			data.value = values.value;
		}
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//分页功能，点击某页
	pageChange= (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = current;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//分页功能，选择每页显示几个
	pageSizeChange = (current, pageSize) => {
		let data = {...this.state.requestParams};
		data.page = 1;
		data.limit = pageSize;
		this.setState({
			requestParams: data
		})
		this.requestList(data);
	}
	
	//点击添加按钮
	handleCreate = () => {
		this.setState({
			isCreateVisible: true,
			formTitle: "添加菜单"
		});
		setTimeout(()=>{//添加清空表单
			this.formRef.current.resetFields()
		},100)
	}
	
	//点击编辑按钮
	handleUpdate = (record) => {
		this.setState({
			isCreateVisible: true,
			selectedItem: record,
			formTitle: "修改菜单"
		});
		setTimeout(()=>{
			//为模态框赋值
			this.formRef.current.setFieldsValue(record);
		},300)
	}
	
	//数据保存提交
	handleSubmit = values => {
		//新增url
		let url = "/Manager/PermitMng/eleCreate";
		//修改url
		if(this.state.formTitle === "修改菜单"){
			url = "/Manager/PermitMng/eleUpdate";
			values.id = this.state.selectedItem.id;
		}
		axios.ajax({
			url: url,
			method: "post",
			data: values
		}).then(res=>{
			if(res.code === 0){
				message.success(res.msg);
				this.requestList(this.state.requestParams);
			}
		})
		this.setState({
			isCreateVisible: false
		})
		this.formRef.current.resetFields();
	}
	
	//删除
	handleDelete = record => {
		Modal.confirm({
			title: `确认删除 ？`,
			icon: <ExclamationCircleOutlined />,
			content: "一经删除，不能恢复",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				axios.ajax({
					url: "/Manager/PermitMng/eleDelete",
					method: "post",
					data: {id: record.id}
				}).then(res=>{
					if(res.code === 0){
						message.success(res.msg);
						this.requestList({
							field: "", 
							value: "", 
							page: 1, 
							limit: 5
						});
					}
				})
			}
		})
	}
	
	componentDidMount(){
		//获取公告列表信息
		this.requestList(this.state.requestParams);
	}
	
	render(){
		const layout = {
		    labelCol: { span: 4 },
		    wrapperCol: { span: 20 },
		};
		const tailLayout = {
		    wrapperCol: { offset: 4, span: 20 },
		};
		const columns = [
			{
				title: "菜单名称",
				dataIndex: "name",
				fixed: 'left',
				width: 100,
			},{
				title: "唯一编码",
				dataIndex: "unique_code",
				width: 200
			},{
				title: "图标",
				dataIndex: "icon"
			},{
				title: "层级",
				dataIndex: "level"
			},{
				title: "类型",
				dataIndex: "type",
				render: value => {
					return {
						"1":<Tag color="blue">目录</Tag>,
						"2":<Tag color="cyan">菜单</Tag>,
						"3":<Tag color="geekblue">按钮</Tag>
					}[value]
				}
			},{
				title: "排序",
				dataIndex: "sort"
			},{
				title: "备注",
				dataIndex: "remark"
			},{
				title: "创建时间",
				width: 200,
				dataIndex: "create_time",
				render: Utils.formateDate
			},{
				title: '操作',
				key: 'action',
				fixed: 'right',
				width: 150,
				render: (text, record) => {
					return <div>
						<Tag color="#108ee9" onClick={() => this.handleUpdate(record)}>编辑</Tag>
						{/*<Tag color="#f45656" onClick={() => this.handleDelete(record)}>删除</Tag>*/}
					</div>
				}
			}
		];
		const count = this.state.count;
		const current = this.state.requestParams.page;
		const pageSize = this.state.requestParams.limit;
		return (
			<div style={{padding: 20}}>
				<Card className="page-search-wrap">
					<Form layout="inline" ref={this.searchFormRef} onFinish={this.searchSubmit}>
						<Form.Item
							label="查询条件"
							name="field"
						>
							<Select
								placeholder="请选择查询条件"
								allowClear
								style={{width: 150}}
							>
								<Option value="name">菜单名称</Option>
								<Option value="unique_code">唯一编码</Option>
								<Option value="icon">菜单图标</Option>
								<Option value="level">菜单层级</Option>
								<Option value="type">菜单类型</Option>
							</Select>
						</Form.Item>
						<Form.Item
							label="条件值"
							name="value"
						>
						    <Input autoComplete="off" />
						</Form.Item>
						<Form.Item>
							<Button type="primary" htmlType="submit">
								查询
							</Button>
							<Button htmlType="button" onClick={()=>this.searchFormRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
					{/*<Button className="float-right" type="primary" onClick={this.handleCreate}>添加菜单</Button>*/}
				</Card>
				<Card>
					<Table
						columns={columns}
						dataSource={this.state.dataSource}
						pagination={false}
						scroll={{x:1300}}
					/>
					<ConfigProvider locale={zhCN}>
						<Pagination
							showQuickJumper
							showSizeChanger
							current={current}
							defaultPageSize={pageSize}
							total={count}
							showTotal={total => `共 ${total} 条`}
							pageSizeOptions={this.state.pageSizeOptions}
							onChange={this.pageChange}
							onShowSizeChange={this.pageSizeChange}
						/>
					</ConfigProvider>
				</Card>
				<Modal
					title={this.state.formTitle}
					visible={this.state.isCreateVisible}
					onCancel={()=>this.setState({isCreateVisible: false})}
					footer={null}
				>
					<Form
						{...layout}
						ref={this.formRef}
						onFinish={this.handleSubmit}
					>
						<Form.Item
							label="父菜单id"
							name="pid"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
							<Input autoComplete="off" disabled />
						</Form.Item>
						<Form.Item
							label="菜单名称"
							name="name"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
						    <Input autoComplete="off" />
						</Form.Item>
						<Form.Item
							label="唯一编码"
							name="unique_code"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
						    <Input autoComplete="off" placeholder="将作为页面路由" disabled />
						</Form.Item>
						<Form.Item
							label="菜单图标"
							name="icon"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
						    <Input autoComplete="off" disabled />
						</Form.Item>
						<Form.Item
							label="菜单层级"
							name="level"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
						    <InputNumber
								autoComplete="off"
								placeholder="请输入数字。1代表1级，2代表2级，3代表3级"
								style={{width: '100%'}}
								disabled
							/>
						</Form.Item>
						<Form.Item
							label="菜单类型"
							name="type"
							rules={[
								{required: true, message: "请选择"},
							]}
						>
							<Select
								placeholder="请选择菜单类型"
								allowClear
								disabled
							>
								<Option value={1}>目录</Option>
								<Option value={2}>菜单</Option>
								<Option value={3}>按钮</Option>
							</Select>
						</Form.Item>
						<Form.Item
							label="排序"
							name="sort"
							rules={[
								{required: true, message: "请输入"},
							]}
						>
						    <InputNumber 
								autoComplete="off" 
								placeholder="请输入数字，数值越小越靠前"
								style={{width: '100%'}}
							/>
						</Form.Item>
						<Form.Item
							label="备注"
							name="remark"
						>
						    <Input autoComplete="off" />
						</Form.Item>
						<Form.Item  {...tailLayout}>
							<Button type="primary" htmlType="submit">
							    保存
							</Button>
							<Button htmlType="button" onClick={()=>this.formRef.current.resetFields()}>
								重置
							</Button>
						</Form.Item>
					</Form>
				</Modal>
			</div>
		)
	}
}

export default IpPage;